<template>
  <div class="worldwide-container">
    <div class="img1-container">
      <img src="@assets/img/world/find.jpg" class="hidden-xs">
      <img src="@assets/img/world/find-wap.jpg" class="visible-xs-inline">
    </div>
    <div class="form-container">
      <div class="title">Find a dealer</div>
      <div class="text">
        Please choose a country or region to find JAC dealerships in your country!
      </div>

      <Form ref="formValidate" :model="formValidate" class="find-form" :label-width="0">
        <FormItem prop="continent">
          <div class="select-form-item">
            <Select v-model="formValidate.continent" placeholder="Select a continent" >
              <Option v-for="(item, index) in continentList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </div>
        </FormItem>
        <FormItem prop="country">
          <div class="select-form-item">
            <Select v-model="formValidate.country" placeholder="Select a country or region" >
              <Option v-for="(item, index) in currentCountryList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </div>
        </FormItem>
      </Form>
      <div class="btn-submit cursor-pointer text-center">GO</div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "WorldWideFind",
    data: () => ({
			formValidate: {continent: '', country: ''},
      continentList: [
				{
					value: 1,
					label: 'America'
				},
				{
					value: 2,
					label: 'Europe'
				},
				{
					value: 3,
					label: 'Asia'
				},
				{
					value: 4,
					label: 'The Middle East'
				},
				{
					value: 5,
					label: 'Africa'
				}
			],
      countryList: {
        1: [
          {value: 1, label: 'Chile'},
          {value: 2, label: 'Uruguay'},
          {value: 3, label: 'Peru'},
          {value: 4, label: 'Bolivia'},
          {value: 5, label: 'Argentina'},
          {value: 6, label: 'Brazil'},
          {value: 7, label: 'Colombia'},
          {value: 8, label: 'Ecuador'},
          {value: 9, label: 'Costa Rica'},
          {value: 10, label: 'Dominica'},
          {value: 11, label: 'Haiti'},
          {value: 12, label: 'Mexico'},
          {value: 13, label: 'Guatemala'}
        ],
        2: [
          {value: 1, label: 'Austria'},
          {value: 2, label: 'Switzerland'},
          {value: 3, label: 'Ukraine'},
        ],
        3: [
          {value: 1, label: 'Georgia'},
          {value: 2, label: 'Sri Lanka'},
          {value: 3, label: 'Nepal'},
          {value: 4, label: 'Israel'},
          {value: 5, label: 'Pakistan'},
          {value: 6, label: 'Bangladesh'},
          {value: 7, label: 'Armenia'},
          {value: 8, label: 'Azerbaijan'},
          {value: 9, label: 'Philippines'},
          {value: 10, label: 'Malaysia'},
          {value: 11, label: 'Hong Kong'}
        ],
        4: [
          {value: 1, label: 'UAE(United Arab Emirates)'},
          {value: 2, label: 'Oman'},
          {value: 3, label: 'Qatar'},
          {value: 4, label: 'Syria'},
          {value: 5, label: 'Bahrain'},
          {value: 6, label: 'Jordan'}
        ],
        5: [
          {value: 1, label: 'Algeria'},
          {value: 1, label: 'Egypt'},
          {value: 1, label: 'Sultan'},
          {value: 1, label: 'South Africa'},
          {value: 1, label: 'Nigeria'}
        ]
      }
    }),
    computed: {
		  currentCountryList() {
		    return this.countryList[this.formValidate.continent] || [];
      }
    },
    watch: {
		  'formValidate.continent'() {
        this.formValidate.country = '';
      }
    }
	}
</script>

<style lang="scss" scoped>
  @import "~@assets/scss/func.scss";
</style>
